import React, { Component } from 'react';
import { View, Swiper, SwiperItem, Image } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { AtButton } from 'taro-ui'
import { URL } from '../../utils/request'
import { addCarts } from '../../utils/common'

import './index.scss'


export default class Index extends Component {

  state = {
    goods: {},
    goods_model: '',
    goods_style: '',
	}

	onShareAppMessage () {
		const { goods } = this.state;
		return {
		 title: goods.name,
		 path: `/pages/goods_detail/index?goods_id=${goods.goods_id}`
		}
	}

	componentDidMount() {
		const goods_id  = Taro.Current.router.params.goods_id;

		Taro.request({
      method: 'POST',
			url: `${URL}api/goods_detail`,
			data: {
				goods_id: goods_id || 1
			},
			header: {
				'content-type': 'application/json' // 默认值
			}
		}).then(res => {
			this.setState({
				goods: res.data.data
			}, () => {
			  Taro.setNavigationBarTitle({title: this.state.goods.name});
      });
		});
  }


    render () {
      const { goods, goods_model, goods_style } = this.state;
      return <View>
        <Swiper
          indicatorColor='#999'
          indicatorActiveColor='#333'
          circular
          indicatorDots
          autoplay
          style='width: calc(100vw); height: calc(100vw);'
        >
          {goods.pictures&&goods.pictures.map( (item, index) => <SwiperItem key={index}>
              <Image style='width: calc(100vw); height: calc(100vw);' src={item} />
          </SwiperItem>)}
        </Swiper>
        <View className='goods-detail-box'>
          <View>
            {goods.name}
          </View>
          <View style='margin: 10px 0'>
            <View style='font-size: 14px;'>尺寸&型号:</View>
            <View className='model-style'>
              {goods.parameter&&goods.parameter.goods_model&&goods.parameter.goods_model.map((item, index) => <View
                key={index}
                className={item === goods_model ? 'model-style-btn-clicked' : 'model-style-btn'}
                onClick={() => this.setState({ goods_model: item })}
              >
                {item}
              </View>)}
            </View>
          </View>
          <View style='margin: 10px 0'>
            <View style='font-size: 14px;'>颜色&款式:</View>
            <View className='model-style'>
              {goods.parameter&&goods.parameter.goods_style&&goods.parameter.goods_style.map((item, index) => <View
                key={index}
                className={item === goods_style ? 'model-style-btn-clicked' : 'model-style-btn'}
                onClick={() => this.setState({ goods_style: item })}
              >
                {item}
              </View>)}
            </View>
          </View>

          <View className='goods-detail-price-line'>
            <View className='goods-detail-price'>¥{goods.price}</View>
            <View className='goods-detail-add-carts'>
              <AtButton
                size='small'
                type='primary'
                circle
                onClick={() => addCarts({
                  goods_id: goods.goods_id,
                  goods_model: goods_model === '' ? goods.parameter.goods_model[0] : goods_model,
                  goods_style: goods_style === '' ? goods.parameter.goods_style[0] : goods_style,
                  goods_number: 1,
                  goods_state: 1
                })}
              >
                加入购物车
              </AtButton>
            </View>
          </View>

          <View>
            <View>商品详细：</View>
            {goods.detail&&goods.detail.map((item, index) => {
              return <View key={index}>
                <Image src={item} style='width: calc(100vw - 20px);' mode='widthFix' lazyLoad />
              </View>
            })}
          </View>
        </View>
      </View>
    }
}
